<template>
  <h3>Person3</h3>
  <p>name {{ name }}</p>
  <p>age {{ age }}</p>

  <p>
    <slot :sonName="name" :sonAge="age" :sonHobbies="hobbies" name="sonSlot"> 
      <!-- 这就是默认内容 -->
      hobbies {{ hobbies }} 
    </slot>
  </p>
</template>

<script setup>
import person from "../../mock/data.json";
import { reactive, toRefs } from "vue";

const { name, age, hobbies } = toRefs(reactive(person));
</script>

<style lang="scss" scoped></style>
